<template>
    <div>
    <el-form inline class="demo-form-inline">
    <el-row >
        <el-col :span="5">
            <el-form-item label="商品名称">
                <el-input v-model="query.payload.spuName" placeholder="商品名称" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="商品描述">
                <el-input v-model="query.payload.spuDescription" placeholder="商品描述" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="所属分类">
                <CatalogCascader :catalogId="query.payload.catalogId" @selectCatalogId="selectCatalogId"/>
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="品牌">
                <el-select v-model="query.payload.brandId" placeholder="请选择">
                    <el-option v-for="item in brands" :label="item.name" :value=item.brandId />
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
            <el-form-item label="上架状态">
                <el-select v-model="query.payload.publishStatus" placeholder="请选择">
                    <el-option label="新建" :value = 0 />
                    <el-option label="上架" :value = 1 />
                    <el-option label="下架" :value = 2 />
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row >
        <el-form-item label="创建时间">
            <el-date-picker
                    v-model="query.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="queryPmsSpuInfo">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <el-button type="success" @click="addPmsSpuInfo">新增</el-button>
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading" :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index" width="60px" label="序号" />
        <el-table-column align="center" prop="spuName" show-overflow-tooltip label="商品名称" />
        <el-table-column align="center" prop="spuDescription" show-overflow-tooltip label="商品描述" />
        <el-table-column align="center" prop="catalogName" width="100px" label="所属分类" />
        <el-table-column align="center" prop="brandName" width="100px" label="品牌" />
        <el-table-column align="center" prop="weight" width="100px" label="重量(kg)" />
        <el-table-column align="center" prop="publishStatus" width="100px" label="上架状态" >
                <template #default="scope">
                <el-tag effect="dark" type="info" v-if="scope.row.publishStatus===0">新建</el-tag>
                <el-tag effect="dark" type="success" v-else-if="scope.row.publishStatus===1">上架</el-tag>
                <el-tag effect="dark" type="error" v-else>下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" width="180px" label="更新时间" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center" width="220px" label="操作">
            <template #default="scope">
                <el-popconfirm  title="上架该商品？" @confirm="up(scope.row.id)">
                    <template #reference>
                    <el-link v-show="scope.row.publishStatus==0||scope.row.publishStatus==2" type="success" >
                        <el-icon :size="20">
                            <Top />
                        </el-icon>
                        上架
                    </el-link>
                    </template>
                </el-popconfirm>
                <el-popconfirm title="下架该商品？" @confirm="down(scope.row.id)">
                    <template #reference>
                    <el-link v-show="scope.row.publishStatus==1" type="error">
                        <el-icon :size="20">
                            <Bottom />
                        </el-icon>
                        下架
                    </el-link>
                    </template>
                </el-popconfirm>
                &nbsp;
                <el-link type="primary" title="规格" @click="editSpuBaseAttr(scope.row.id, scope.row.catalogId)">
                    <el-icon :size="20">
                        <Tickets />
                    </el-icon>
                    规格
                </el-link>
                &nbsp;
                <el-popconfirm title="删除该商品？" @confirm="deleteThisSpu(scope.row.id, scope.row.publishStatus)"  @cancel="">
                    <template #reference>
                        <el-link type="danger">
                            <el-icon :size="20">
                                <Delete />
                            </el-icon>
                            删除
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryPmsSpuInfo"
        @current-change="queryPmsSpuInfo"
/>
<ModPmsSpuInfo @close="modPmsSpuInfo.isOpen = false"  @reload="queryPmsSpuInfo"
              ref="modPmsSpuInfo"
              :openType="transData.openType"
              :id="transData.id"
/>

<ModSpuBaseAttr ref="modSpuBaseAttr" :id="transData.id" :catalogId="transData.catalogId"/>
</div>
</template>

<script setup>
    import ModPmsSpuInfo from '@/views/mall/pms/components/ModPmsSpuInfo.vue'
    import ModSpuBaseAttr from '@/views/mall/pms/components/ModSpuBaseAttr.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    let transData = reactive({})
    let modPmsSpuInfo = ref(null)
    let modSpuBaseAttr = ref(null)
    let brands = reactive([])
    let data = reactive({
        modRole:false,
        tableData:[],
        openType:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryPmsSpuInfo()
    })
    function queryPmsSpuInfo(){
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        request.post("/api/pmsSpuInfo/getPmsSpuInfoPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
            query.payload.spuName = ""
            query.payload.spuDescription = ""
            query.payload.catalogId = ""
            query.payload.brandId = ""
            query.payload.weight = ""
            query.payload.publishStatus = ""
            query.dateRange=[]
    }

    function addPmsSpuInfo(){
        transData.openType = "add"
        modPmsSpuInfo.value.isOpen = true
    }

    function up(id){
        loading.value = true
        request.get(`/api/pmsSpuInfo/up/${id}`).then(resp => {
            ElMessage({message: '上架成功！',type: 'success'})
            queryPmsSpuInfo()
        })
    }
    function down(id){
        loading.value = true
        request.get(`/api/pmsSpuInfo/down/${id}`).then(resp => {
            ElMessage({message: '商品下架成功！',type: 'success'})
            queryPmsSpuInfo()
        })
    }

    function deleteThisSpu(id, status){
        if(status !== 1){// 不等于上架可以删除
            request.get(`/api/pmsSpuInfo/delete/${id}`).then(resp => {
                ElMessage({message: '商品删除成功！',type: 'success'})
                queryPmsSpuInfo()
            })
        }else{
            ElMessage({message: '上架商品不可以删除！',type: 'error'})
        }
    }
    function editSpuBaseAttr(id,catalogId){
        transData.id = id
        transData.catalogId = catalogId
        modSpuBaseAttr.value.isOpen = true
    }

    function selectCatalogId(catId) {
        query.payload.catalogId=catId
        query.payload.brandId = null
        request.get(`/api/pmsBrand/getBrandsByCatalogId/${catId}`).then(resp => {
            brands.length=0
            brands.push(...resp)
        })
    }

</script>
<style lang="css">

</style>


